/**
 * 组件名称：Footer
 * 使用场景：平台首页收尾
 * 功能介绍：颜色、链接、按钮等，符合官网的要求
 * 功能进度：100%
 * 待办事项：无
 */

import {Text, Container, ActionIcon, Group, rem} from "@mantine/core";
import {IconBrandGithub, IconBrandWechat, IconBrandWeibo} from "@tabler/icons-react";
import {IpdLogo} from "@/components/IpdHeader/IpdLogo";
import classes from "./IpdFooter.module.css";

const footerList = [
  {
    title: "前端支持",
    links: [
      {label: "NextJS框架", link: "https://nextjs.org/"},
      {label: "Mantine图形库", link: "https://mantine.dev/"},
      {label: "PostCSS样式", link: "https://postcss.org/"},
      {label: "TypeScript语法", link: "https://www.typescriptlang.org/"},
    ],
  },
  {
    title: "后端支持",
    links: [
      {label: "Spring框架", link: "https://spring.io"},
      {label: "Ruoyi框架", link: "http://www.ruoyi.vip/"},
      {label: "JWT工具", link: "https://jwt.io/"},
      {label: "Druid工具", link: "https://druid.apache.org/"},
    ],
  },
  {
    title: "数据库支持",
    links: [
      {label: "Neo4j图数据库", link: "https://neo4j.com/"},
      {label: "MySQL数据库", link: "https://www.mysql.com/"},
      {label: "Redis数据库", link: "https://redis.io/"},
      {label: "MongoDB数据库", link: "https://www.mongodb.com/"},
    ],
  },
];

interface LinkProps {
  label: React.ReactNode;
  link: string;
}

interface FooterProps {
  title: React.ReactNode;
  links: LinkProps[];
}

const FooterList = ({title, links}: FooterProps) => {
  return (
    <div className={classes.wrapper}>
      <Text className={classes.title}>{title} </Text>
      {links.map((item, index) => (
        <Text key={index} className={classes.link} component="a" href={item.link} target="_blank">
          {item.label}
        </Text>
      ))}
    </div>
  );
};

export const IpdFooter = () => {
  return (
    <footer className={classes.footer}>
      <Container className={classes.inner}>
        <div className={classes.logo}>
          <IpdLogo />
          <Text size="xs" c="dimmed" className={classes.description}>
            构建赏心悦目的系统，变革传统的生产方式，全面推进数智化转型
          </Text>
        </div>
        <div className={classes.groups}>
          {footerList.map((item, index) => (
            <FooterList {...item} key={index} />
          ))}
        </div>
      </Container>
      <Container className={classes.afterFooter}>
        <Text c="dimmed" size="sm">
          © 2024 中国移动通信集团设计院有限公司 版权所有
        </Text>

        <Group gap={0} className={classes.social} justify="flex-end" wrap="nowrap">
          <ActionIcon size="lg" color="gray" variant="subtle">
            <IconBrandGithub style={{width: rem(18), height: rem(18)}} stroke={1.5} />
          </ActionIcon>
          <ActionIcon size="lg" color="gray" variant="subtle">
            <IconBrandWechat style={{width: rem(18), height: rem(18)}} stroke={1.5} />
          </ActionIcon>
          <ActionIcon size="lg" color="gray" variant="subtle">
            <IconBrandWeibo style={{width: rem(18), height: rem(18)}} stroke={1.5} />
          </ActionIcon>
        </Group>
      </Container>
    </footer>
  );
};
